<template>
  <div id="app">
    <el-row class="nav-content">
      <el-col :span=3 style="text-align: center">
        <img alt="Vue logo" src="./assets/logo.png">
      </el-col>
      <el-col :span=18>
        <router-link to="/">官网</router-link>
        <router-link to="/">P-luo博客</router-link>
        <router-link to="/">开源程序</router-link>
        <router-link to="/">广告合作</router-link>
        <router-link to="/" style="color: red;">优惠券</router-link>
      </el-col>
      <el-col :span=3>
        <router-link to="/">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              关于版本<i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus">
                <a title="互动笔记、原创教程、资源分享、疑难解答、最新技术，Web前端及爱好者提供一个信息交流、经验分享、互帮互助的平台">
                  官方博客
                </a>
              </el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </router-link>
      </el-col>
    </el-row>
    <router-view class="content"/>
  </div>
</template>

<style lang="less">
  body{
    margin: 0;
  }
  p{
    margin: 0;
  }
 .nav-content{
   height: 64px;
   line-height: 64px;
   position: fixed!important;
   top: 0;
   background: white;
   width: 100%;
   font-size: 14px;
   img{
     width: 65px;
     padding-left: 10px;
   }
   a {
     color: #000;
     height: 60px;
     padding: 0 20px;
     border-bottom: 4px solid transparent;
     transition: all .5s linear;
     display: inline-block;
     text-decoration: none;
   }
   a:hover{
     color: blueviolet!important;
     border-bottom: 4px solid blueviolet;
     transition: all .5s linear;
   }
   .el-dropdown:hover{
     color: blueviolet!important;
   }
 }
  .content{
    margin-top: 64px;
  }
</style>
